<template>
    <el-row class="category" :gutter="20">
        <el-col :span="5">
            <el-row class="left">
                <el-col v-for="(item, index) in leftData" :key="item.id" :span="24" :class="index < leftData.length - 1 ? 'border' : ''">
                    <a class="item"  @click="leftItemChange(item.id, $event)">{{item.name}}</a>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="14">
            <el-row class="center">
                <el-col :span="24" v-for="item in centerDate" :key="item.id">
                    <el-button size="mini" plain @click="centerItemChange(item.id, $event)" :disabled="item.disable">{{item.name}}
                        <span v-if="allflag" class="badge">ALL</span>
                    </el-button>
                    <el-button size="mini" plain v-for="child in item.children" :disabled="child.disable" :key="child.id"  @click="centerChildItemChange(child.id)">
                        {{child.name}}
                    </el-button>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="5">
            <el-row class="right">
                <el-col :span="24">
                    <el-tag v-for="(tag, index) in rightData" :key="tag.id" @close="handleClose(index, tag.id)" closable :type="tag.type">
                        {{tag.name}}
                    </el-tag>
                </el-col>
                <el-col :span="2" :offset="22" class="help">
                    <el-tooltip effect="light" placement="bottom-end" > 
                        <div slot="content">备选框。</div>
                        <img src="~@/assets/images/help.png" />
                    </el-tooltip>
                </el-col>
            </el-row>
            
        </el-col>
    </el-row>
</template>
<script>
import './index.scss';

export default {
    data() {
        return {
            leftData: [],
            centerDate: [],
            rightData : [],
            rightValue : []
        }
    },
    props : {
        value : {
            type : Array,
            default : []
        },
        object : {
            type : Array,
            default : []
        },
        type : {
            type : String,
            required: true,
        },
        allflag : {
            type : Boolean,
            default : true
        }
    },
    methods: {
        leftItemChange : function(id, el){
            let els = el.path[2].querySelectorAll(".active");
            if(els.length != 0){
                for (let index = 0; index < els.length; index++) {
                    const element = els[index];
                    element.classList.remove("active");
                }
            }
            el.path[1].classList.add("active");
            //发送请求改变centerDate

        },
        centerItemChange : function(id){
            let length = this.centerDate.length;
            if(length == 0){
                return ;
            }
            let temp = -1;
            for (let index = 0; index < this.centerDate.length; index++) {
                const element = this.centerDate[index];
                if(element.id == id){
                    temp = index;
                    break;
                }
            }
            if(temp != -1){
                this.centerDate[temp].disable = true;
                let children = this.centerDate[temp].children;
                let tempItem = this.centerDate[temp];
                tempItem.type = "";
                this.rightData.push(tempItem);
                if(children && children.length != 0){
                    for (let index = 0; index < children.length; index++) {
                        let element = children[index];
                        element.disable = true;
                        let _i = -1;
                        for (let i = 0; i < this.rightData.length; i++) {
                            const el = this.rightData[i];
                            if(el.id == element.id){
                                _i = i;
                                break;
                            }
                        }
                        if(_i != -1){
                            this.rightData.splice(_i, 1);
                        }
                    }
                }
            }
            this.updateValue();
        },
        centerChildItemChange : function(id){
            let length = this.centerDate.length;
            if(length == 0){
                return ;
            }
            for (let index = 0; index < this.centerDate.length; index++) {
                const element = this.centerDate[index];
                if(!element.children || element.children.length == 0){
                    continue;
                }
                for (let i = 0; i < element.children.length; i++) {
                    const child = element.children[i];
                    if(child.id == id){
                        child.disable = true;
                        child.type = "info";
                        this.rightData.push(child);
                        index = this.centerDate.length;
                        break;
                    }
                }
            }
            this.updateValue();
        },
        handleClose : function(index, id){
            this.rightData.splice(index, 1);
            this.selectItem(id, this.centerDate);
            this.updateValue();
        },
        selectItem : function(id, arr){
            let length = arr.length;
            if(length == 0){
                return ;
            }
            for (let index = 0; index < arr.length; index++) {
                const el = arr[index];
                if(el.id == id){
                    el.disable = false;
                    if(el.children && el.children.length != 0){
                        for (let i = 0; i < el.children.length; i++) {
                            el.children[i].disable = false;
                        }
                    }
                    return ;
                }
                if(el.children && el.children.length != 0){
                    this.selectItem(id, el.children);
                }
            }
        },
        updateValue : function(){
            if(this.rightData.length != 0){
                this.rightValue = [];
                for (let index = 0; index < this.rightData.length; index++) {
                    const element = this.rightData[index];
                    this.rightValue.push(element.id);
                }
            }
            this.$emit('input', this.rightValue);
            this.$emit('update:object', this.rightData);
        }
    },
    watch: {

    },
    mounted: function() {

    },
    created: function() {
        //根据不同的type获取不同的类别数据
        let leftData = [];
        let centerDate = [];
        if(this.type == "productCategory"){//产品类别
            leftData = [{
                id: "1",
                name: "大类1"
            }, {
                id: "2",
                name: "大类2"
            }, {
                id: "3",
                name: "大类3"
            }, {
                id: "4",
                name: "大类4"
            }];
            centerDate = [{
                id: "0.0",
                name: "中类0",
                children: [],
                disable : false
            },{
                id: "1.1",
                name: "中类1",
                children: [{
                    id: "1.11",
                    name : "小类1.11",
                    disable : false
                },{
                    id: "1.12",
                    name : "小类1.12",
                    disable : false
                },{
                    id: "1.13",
                    name : "小类1.13",
                    disable : false
                },{
                    id: "1.14",
                    name : "小类1.14",
                    disable : false
                }],
                disable : false
            },{
                id: "1.2",
                name: "中类2",
                children: [{
                    id: "1.21",
                    name : "小类1.21",
                    disable : false
                },{
                    id: "1.22",
                    name : "小类1.22",
                    disable : false
                },{
                    id: "1.23",
                    name : "小类1.23",
                    disable : false
                },{
                    id: "1.24",
                    name : "小类1.24",
                    disable : false
                }],
                disable : false
            },{
                id: "1.3",
                name: "中类3",
                children: [{
                    id: "1.31",
                    name : "小类1.30",
                    disable : false
                },{
                    id: "1.32",
                    name : "小类1.32",
                    disable : false
                },{
                    id: "1.33",
                    name : "小类1.33",
                    disable : false
                },{
                    id: "1.34",
                    name : "小类1.34",
                    disable : false
                }],
                disable : false
            },{
                id: "1.4",
                name: "中类4",
                children: [{
                    id: "1.41",
                    name : "小类1.40",
                    disable : false
                },{
                    id: "1.42",
                    name : "小类1.42",
                    disable : false
                },{
                    id: "1.43",
                    name : "小类1.43",
                    disable : false
                },{
                    id: "1.44",
                    name : "小类1.44",
                    disable : false
                }],
                disable : false
            },{
                id: "1.5",
                name: "中类5",
                children: [{
                    id: "1.51",
                    name : "小类1.50",
                    disable : false
                },{
                    id: "1.52",
                    name : "小类1.52",
                    disable : false
                },{
                    id: "1.53",
                    name : "小类1.53",
                    disable : false
                },{
                    id: "1.54",
                    name : "小类1.54",
                    disable : false
                }],
                disable : false
            }];
        }else if(this.type == "enterType"){//客户类型
            leftData = [{
                id: "1",
                name: "餐饮业"
            }, {
                id: "2",
                name: "商贸业"
            }];
            centerDate = [{
                id: "0.0",
                name: "大酒楼",
                children: [],
                disable : false
            },{
                id: "1.1",
                name: "大排档",
                children: [],
                disable : false
            },{
                id: "1.2",
                name: "饮食店",
                children: [],
                disable : false
            }];
        }else if(this.type == "enterRange"){//客户区域
            leftData = [{
                id: "1",
                name: "惠州市"
            }, {
                id: "2",
                name: "汕尾市"
            }];
            centerDate = [{
                id: "0.0",
                name: "海丰县",
                children: [{
                    id: "0.11",
                    name: "城东镇",
                    disable : false
                },{
                    id: "0.12",
                    name: "附城镇",
                    disable : false
                },{
                    id: "0.13",
                    name: "海城镇",
                    disable : false
                }],
                disable : false
            },{
                id: "1.1",
                name: "陆丰市",
                children: [{
                    id: "1.11",
                    name : "博美镇",
                    disable : false
                },{
                    id: "1.12",
                    name : "桥冲镇",
                    disable : false
                },{
                    id: "1.13",
                    name : "八万镇",
                    disable : false
                },{
                    id: "1.14",
                    name : "城东镇",
                    disable : false
                }],
                disable : false
            },{
                id: "1.2",
                name: "陆河县",
                children: [{
                    id: "1.21",
                    name : "河田镇",
                    disable : false
                },{
                    id: "1.22",
                    name : "螺溪镇",
                    disable : false
                },{
                    id: "1.23",
                    name : "水唇镇",
                    disable : false
                },{
                    id: "1.24",
                    name : "河口镇",
                    disable : false
                }],
                disable : false
            },{
                id: "1.3",
                name: "门市",
                children: [{
                    id: "1.31",
                    name : "门市客户",
                    disable : false
                }],
                disable : false
            },{
                id: "1.4",
                name: "城区",
                children: [{
                    id: "1.41",
                    name : "东洲街道",
                    disable : false
                },{
                    id: "1.42",
                    name : "东涌镇",
                    disable : false
                },{
                    id: "1.43",
                    name : "红草镇",
                    disable : false
                },{
                    id: "1.44",
                    name : "捷胜镇",
                    disable : false
                }],
                disable : false
            },{
                id: "1.5",
                name: "公司",
                children: [{
                    id: "1.51",
                    name : "公司销售",
                    disable : false
                }],
                disable : false
            }];
        }
        this.leftData = leftData;
        this.centerDate = centerDate;
    },
    beforeDestroy: function() {

    }
}
</script>